<template>
    <el-container class="help-question-page question-detail">
        <el-aside width="320px">
            <div class="w-1/2 mr-4">
                <div
                    class="tab-item"
                    v-for="item in categoryList"
                    :key="item.id"
                >
                    <el-button
                        type="text"
                        @click="onShow(item)"
                        class="tab-title cursor-pointer"
                    >
                        {{ item.name }}
                    </el-button>
                    <div
                        class="tab-little-item box-border pl-6"
                        v-if="item.show"
                    >
                        <div v-for="(items, j) in item.problems" :key="j">
                            <div
                                @click="getDetail(items, item)"
                                class="tab-mini-item cursor-pointer"
                            >
                                {{ items.name }}
                            </div>
                        </div>
                        <div
                            class="mt-2"
                            v-if="!item.problems || !item.problems.length"
                        >
                            暂无相关问题
                        </div>
                    </div>
                </div>
            </div>
        </el-aside>
        <el-main class="w-3/4" v-loading="loading">
            <div class="title">{{ title }}</div>
            <div class="detail" v-html="detail"></div>
            <el-image-viewer
                v-if="showImageViewer"
                :on-close="onImageViewerClose"
                :url-list="imageViewerUrlList"
                :initial-index="imageViewerIndex"></el-image-viewer>
        </el-main>
    </el-container>
</template>

<script>
import { Container, Aside, Main } from 'element-ui';
import ImageViewer from 'element-ui/packages/image/src/image-viewer';

export default {
    components: {
        ElAside: Aside,
        ElMain: Main,
        ElContainer: Container,
        ElImageViewer: ImageViewer,
    },
    data() {
        return {
            id: '',
            typeId: '',
            loading: false,
            categoryList: [],
            content: {},

            selected: '',
            detail: '',
            title: '',

            showImageViewer: false,
            imageViewerUrlList: [],
            imageViewerIndex: 0,
        };
    },
    computed: {
        helpTitle() {
            return { ...this.$store.state.helpTitle };
        },
    },
    methods: {
        onShow(e) {
            e.show = !e.show;
        },

        getQuesList() {
            this.loading = true;
            API.get('../problem_category').then(res => {
                const list = res || [];

                list.map(item => {
                    item.show = item.id === this.typeId;
                    return item;
                });

                let types = '';

                for (const val of list) {
                    if (val.id !== this.typeId) continue;
                    if (!val.problems || !val.problems.length) continue;
                    for (const item of val.problems) {
                        if (this.id === item.id) {
                            types = item.name;
                            this.fetchDetail(item.id);
                        }
                    }
                }

                this.setStore('three', {
                    title: types,
                });

                this.categoryList = list;
            }).finally(() => this.loading = false);
        },

        getDetail(e, item) {
            if (e.id === this.content.id) return;
            this.content = e;
            this.setStore('three', {
                title: e.name,
            });
            this.fetchDetail(e.id);
            this.$router.replace({
                query: {
                    id: e.id,
                    typeId: item.id,
                },
            });
        },
        fetchDetail(id) {
            this.loading = true;
            API.get(`../problem/${id}`).then(res => {
                this.detail = res.content;
                this.title = res.name;
                this.$nextTick(() => {
                    const videoNodes = window.document.querySelectorAll('.detail video');
                    videoNodes.forEach(video => {
                        video.setAttribute('controlsList', 'nodownload');
                    });
                    const imgNodes = window.document.querySelectorAll('.detail img');
                    const imageViewerUrlList = [];
                    imgNodes.forEach(img => {
                        const src = img.getAttribute('src');
                        imageViewerUrlList.push(src);
                        img.setAttribute('title', '可点击查看大图');
                        img.outerHTML = `<div class="img-wrapper">
                            ${ img.outerHTML }
                            <span class="img-title">（可点击查看大图）</span>
                        </div>`;
                    });
                    this.imageViewerUrlList = imageViewerUrlList;
                });
            }).finally(() => this.loading = false);
        },

        setStore(text, obj) {
            const title = {
                ...this.helpTitle,
                ...{
                    [text]: obj,
                },
            };
            this.$store.commit('setHelpTitle', title);
        },

        onImageViewerClose() {
            this.showImageViewer = false;
        },
    },
    mounted() {
        const query = this.$route.query;

        this.id = +query.id || '';
        this.typeId = +query.typeId || '';

        this.getQuesList();
        this.setStore('two', {
            title: '问题列表',
            path: '/helps/container/question/List',
        });

        window.document.querySelector('.detail').addEventListener('click', e => {
            if (e.target.nodeName.toLowerCase() === 'img') {
                this.showImageViewer = true;
                this.imageViewerIndex = this.imageViewerUrlList.indexOf(e.target.getAttribute('src'));
            }
        });
    },
    destroyed() {
        this.setStore('three', {
            title: '',
        });
    },
};
</script>

<style lang="scss">
@media (max-width: 960px) {
    .question-detail {
        .el-aside {
            display: none;
        }

        .w-3\/4 {
            width: 100%;
        }
    }
}

.help-question-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;

    .tab-title {
        font-size: 16px;
        font-weight: normal;
        line-height: 22px;
        color: rgb(37, 37, 37);
        padding: 0;
        margin-bottom: 15px;
    }

    .tab-mini-item {
        font-size: 16px;
        color: #2d70ae;
        line-height: 22px;
        margin-bottom: 15px;
        width: 280px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .el-main {
        height: 100%;
        overflow-y: auto;
        padding-bottom: 50px;
        padding-top: 0;

        @media (max-width: 960px) {
            width: 100%;
        }

        .detail {
            img {
                cursor: pointer;
            }
            .img-wrapper {
                text-align: center;
            }
            .img-title {
                display: inline-block;
                font-size: 12px;
                color: #999;
                margin-top: 0.25rem;
                margin-bottom: 1.25rem;
            }

            p {
                margin: 0.75rem 0 !important;
                line-height: 1.6 !important;
            }

            @media (max-width: 960px) {
                p, span {
                    font-size: 14px !important;
                    line-height: 20px !important;
                }
            }

            video {
                border: 4px solid #2d70ae;
                border-radius: 6px;
            }
        }

        .title {
            font-size: 24px;
            line-height: 33px;
            margin-bottom: 25px;

            @media (max-width: 960px) {
                font-size: 18px;
                line-height: 25px;
                font-weight: bold;
                margin-bottom: 16px;
            }
        }
    }
}
</style>
